<template>
	<view class="main column_c">

		<u-navbar title="教患视频" placeholder="true" @rightClick="rightClick" :autoBack="true" :leftIconSize="0"></u-navbar>

		<view style="margin-top: 20rpx;">
			<u-tabs :list="tabs" v-model="activeTab" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		        color: '#ffffff',
				width:'150rpx',
				height:'60rpx',
				background:'#1FA194',
				borderRadius:'40rpx',
		        fontWeight: 'bold',
		        display: 'flex',
		        alignItems: 'center',
		        justifyContent: 'center',
		       
		    }" :inactiveStyle="{
		       color: '#303133',
		       width:'150rpx',
		       height:'60rpx',
		       background:'#F3F3F3',
			   display: 'flex',
			   alignItems: 'center',
			   justifyContent: 'center',
		       borderRadius:'40rpx',
		    }">
			</u-tabs>
		</view>



		<view class="column-wrap ">

			<view class="col-item">
				<image class="yyjl" src="/static/images/ysh.png"></image>
				<view class="wzz">【X光片】暂无备注</view>
			</view>

			<view class="col-item">
				<image class="yyjl" src="/static/images/ysh.png"></image>
				<view class="wzz">【X光片】暂无备注</view>
			</view>

			<view class="col-item">
				<image class="yyjl" src="/static/images/ysh.png"></image>
				<view class="wzz">【X光片】暂无备注</view>
			</view>

			<view class="col-item">
				<image class="yyjl" src="/static/images/ysh.png"></image>
				<view class="wzz">【X光片】暂无备注</view>
			</view>

			<view class="col-item">
				<image class="yyjl" src="/static/images/ysh.png"></image>
				<view class="wzz">【X光片】暂无备注</view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineBg: 0,
				activeTab: 0,
				tabs: [
					{ name: '全部' },
					{ name: '口内CT' },
					{ name: '面相照' },
					{ name: 'BT' }
				],
				doctors: [{
						name: '林娜娜',
						position: '儿童齿科中心主任医生',
						role: '医生',
						description: '儿童口腔科各种疾病诊疗及早期矫正项目：儿童金属预成冠，儿童前牙透明冠，儿童咬合诱导，根管治疗；全瓷修复，牙齿美白，牙周治疗等',
						image: 'https://example.com/doctor1.jpg' // 替换为实际图片地址
					},
					{
						name: '林娜娜',
						position: '儿童齿科中心主任医生',
						role: '副主任医师',
						description: '儿童口腔科各种疾病诊疗及早期矫正项目：儿童金属预成冠，儿童前牙透明冠，儿童咬合诱导，根管治疗；全瓷修复，牙齿美白，牙周治疗等',
						image: 'https://example.com/doctor2.jpg' // 替换为实际图片地址
					}
				]
			};
		},
		methods: {
			toUrl(url) {
				this.navTo(url);
			},
		}
	};
</script>

<style scoped>
	.main {
		width: 100%;
		height: 100vh;

		background: #FAFAFA;



	}

	.top {
		padding: 32rpx;

	}



	::v-deep .u-tabs__wrapper__nav__item {
		padding: 18rpx !important;
	}





	.yyjl {
		height: 160rpx;
		width: 330rpx;
	}

	.wzz {
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		margin-top: 16rpx;
	}



	.itema {
		margin-bottom: 25rpx;
	}

	.row-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.column-wrap {
		width: 100%;
		overflow: hidden;
		/* 清除浮动影响 */
		margin-left: 45rpx;
		margin-top: 30rpx;
	}

	.col-item {
		float: left;
		width: 48%;
		/* 每个 item 占据 48%，留 2% 的间隔 */
		margin-right: 2%;
		/* 右边间隔 */
		margin-bottom: 10px;
		/* 下方间隔，防止重叠 */
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.col-item:nth-child(2n) {
		margin-right: 0;
		/* 保证每行最后一项没有多余的间隔 */
	}
</style>